<template>
<!-- Sidebar Menu -->
<ul class="sidebar-menu" data-widget="tree">
  <li class="header"></li>
  <!-- Optionally, you can add icons to the links -->
  <li v-for="item in $store.getters.getNav" v-bind:class="{'treeview': item.menuType == 'tree', 'active': item.routerName === activeRouter}">
    <a v-if="item.menuType == 'tree'">
      <i v-bind:class="item.iconClass"></i> <span>{{item.name}}</span>
      <span class="pull-right-container">
        <i class="fa fa-angle-left pull-right"></i>
      </span>
    </a>
    <a v-else href="javascript:void(0);" v-on:click ="navSelect(item.routerName)">
      <i v-bind:class="item.iconClass"></i> <span>{{item.name}}</span>
    </a>
    <ul v-if="item.menuType == 'tree'" class="treeview-menu">
      <li v-for="itemSon in item.subMenu" v-bind:class="{'active': itemSon.routerName === activeRouter}" v-on:click ="navSelect(itemSon.routerName)">
        <a><i :class="itemSon.iconClass"></i> <span>{{itemSon.name}}</span></a>
      </li>
    </ul>
  </li>
</ul>
<!-- /.sidebar-menu -->
</template>
<script>
export default {
  name: 'leftNav',
  data () {
    return {
      activeRouter: 'home'
    }
  },
  props: {
  },
  components: {
  },
  methods: {
    navSelect (routerName) {
      this.$router.push({name: routerName})
      // console.log(this.$route)
      this.activeRouter = this.$route.name
    }
  },
  beforeCreate () {},
  created () {},
  beforeMount () {},
  mounted () {
    this.activeRouter = this.$route.fullPath.replace('/', '')
  },
  beforeUpdate () {},
  updated () {},
  beforeDestroy () {},
  destroyed () {}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
